import Ajax from 'common/utils/ajax';
import { Modal, Button, Tabs, Upload } from 'antd';
import classnames from 'classnames';
import Utils from 'common/utils';
import css from './index.less';
import PropTypes from 'prop-types';
import chunk from 'lodash/chunk';
const TabPane = Tabs.TabPane;
const ImagesType = [
  {
    type: 'sys',
    name: '系统图片',
  },
  {
    type: 'mine',
    name: '我的图片',
  },
  /*{
    type: 'purchase',
    name: '我购买的'
  }*/
];

class ImagePicker extends React.Component {

  static propTypes = {
    onChange: PropTypes.func,
    style: PropTypes.object,
  };

  static defaultProps = {
    onChange: () => {},
    style: {},
  };

  constructor(props) {
    super(props);
    this.state = {
      selectedTabType: 'sys',
      loading: false,
      list: [],
      total: 0,
      pageSize: 10,
      pageNo: 1,
      card: {
        width: 180,
        height: 330
      }
    };
  }

  onFetchImages(type = 'sys') {
    const { pageNo, pageSize } = this.state;
    this.setState({
      loading: true,
    });
    Ajax.req({
      url: 'images.getImages',
      params: {
        type,
        pageNo,
        pageSize,
      }
    }).then((resp) => {
      this.setState({
        loading: false,
        list: resp.list,
        total: resp.total,
      });
    });
  }

  onShow() {
    this.setState({
      show: true,
    });
    this.onFetchImages();
  }

  onHide() {
    this.setState({
      loading: false,
      show: false,
    });
  }

  renderCard(img, i) {
    const { onChange } = this.props;
    const { width, height } = this.state.card;
    const props = {
      className: classnames([css.card, 'm-r']),
      key: i,
      style: {
        flex: `1 0 ${width}px`,
        height,
        backgroundImage: `url(${img})`
      },
      onClick: (e) => {
        e.stopPropagation();
        const size = Utils.getImgSize(img);
        onChange && onChange(img, {
          src: img,
          ...size,
        });
        this.onHide();
      }
    };
    return (
      <div {...props}>
        <div className={css.front}>
          <div className={css.circle}>选择</div>
        </div>
        <div className={css.mask} />
      </div>
    );
  }

  renderTabs() {
    const { list, selectedTabType } = this.state;
    const tabsProps = {
      tabPosition: 'left',
      onChange: (type) => {
        this.setState({
          selectedTabType: type,
        });
        this.onFetchImages(type);
      }
    };

    const renderPane = (type) => {
      if (selectedTabType !== type) return null;
      const _chunk = chunk(list, 5);
      return (
        <div>
          <div className="text-size-16 m-b">默认图片</div>
          {
            _chunk.map((arr, n) => {
              return (
                <div className={classnames([css.imgList, 'm-b'])} key={n}>
                  {
                    arr.map((img, i) => {
                      return this.renderCard(img, i);
                    })
                  }
                </div>
              );
            })
          }
        </div>
      );
    };

    return (
      <Tabs {...tabsProps}>
        {
          ImagesType.map(item => {

            const tabProps = {
              tab: <div className="text-size-18">{item.name}</div>,
              key: item.type
            };
            return (
              <TabPane {...tabProps}>
                {renderPane(item.type)}
              </TabPane>
            );
          })
        }
      </Tabs>
    );
  }

  renderUploader() {
    const maxSize = 5;
    const uploadProps = {
      action: CFG.api.images.upload,
      accept: 'image/*',
      beforeUpload: (file) => {
        const isLt5M = file.size / 1024 / 1024 < maxSize;
        if (!isLt5M) {
          Modal.error(`图片不超过${maxSize}MB！`);
        }
        return isLt5M;
      }
    };
    const btnProps = {
      type: 'primary',
      className: css.uploadBtn,
      style: {
        left: 14,
        bottom: 18,
        fontSize: 16,
        padding: '5px 20px',
        height: 'auto',
      }
    };
    return (
      <Upload {...uploadProps}>
        <Button {...btnProps}>上传图片</Button>
      </Upload>
    );
  }

  render() {
    const { show } = this.state;
    const modalProps = {
      visible: show,
      width: '80%',
      title: null,
      footer: null,
      onCancel: this.onHide.bind(this)
    };
    const props = {
      onClick: this.onShow.bind(this),
      style: {
        ...this.props.style,
      }
    };
    return (
      <span {...props}>
        {this.props.children}
        <Modal {...modalProps}>
          {
            this.renderTabs()
          }
          {
            this.renderUploader()
          }
        </Modal>
      </span>
    );
  }
}
export default ImagePicker;
